<template>
  <el-card>
    <el-row>
      <el-form :inline="true" :model="queryVo" size="default">
        <el-form-item label="文件名称" prop="fileName">
          <el-input v-model="queryVo.fileName" placeholder="请输入文件名称" />
        </el-form-item>
        <el-form-item label="文件原名" prop="fileOnceName">
          <el-input v-model="queryVo.fileOnceName" placeholder="请输入文件原名" />
        </el-form-item>
        <el-form-item label="扩展名" prop="fileFomat">
          <el-input v-model="queryVo.fileFomat" placeholder="请输入扩展名" />
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" @click="getList()">查询</el-button>
          <el-button size="small" type="default" @click="resetQuery">重置</el-button>
        </el-form-item>
        <el-form-item/>
      </el-form>
    </el-row>
      <el-row>
        <el-upload
            class="upload-demo"
            :action="uploadUrl"
            ref="uploadRef"
            :limit="1"
            :file-list="state.uploadFileList"
            :show-file-list="false"
            :on-success="onSuccess"
            :on-progress="onProgress"
            :on-error="onError"
            :before-upload="handlerBefore"
        >
          <el-button  size="small"  type="primary" :loading="state.btnLoding">{{state.btnTitle}}</el-button>
        </el-upload>
        <el-popconfirm title="确定删除吗？" @confirm="selectDelete">
          <template #reference>
            <el-button size="small"  class="ml10" type="danger" :disabled="selectNodes.length<=0">
              <el-icon>
                <ele-Delete/>
              </el-icon>
              删除
            </el-button>
          </template>
        </el-popconfirm>
        <el-button size="small" class="ml10" type="success" @click="showView">
          <el-icon>
            <ele-Delete/>
          </el-icon>
          {{state.viewTitle}}
        </el-button>
      </el-row>
    <el-row class="mt10">
      <el-table :data="pageList"
                v-loading="state.loding"
                @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="fileName" label="文件名称" align="center"/>
        <el-table-column prop="fileOnceName" label="文件原名" align="center"/>
        <el-table-column prop="fileFomat" label="文件扩展名" align="center"/>
        <el-table-column prop="fileFomat" label="文件预览" align="center" v-if="state.viewFlag">
        <template #default="scope">
          <el-image preview-teleported v-if="scope.row.fileFomat.includes('png')||
    scope.row.fileFomat.includes('jpg')||scope.row.fileFomat.includes('jpeg')||scope.row.fileFomat.includes('gif')"
              style="width: 100px; height: 100px"
              :src="scope.row.fileOssUrl"
              :preview-src-list="srcList"
                    hide-on-click-modal
                    @click="showPicView(scope.row.fileOssUrl)"
              fit="cover"
          />
        </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" align="center"/>
        <el-table-column align="center" label="操作" v-auths="['system-user-update', 'system-user-delete', 'system-user-respwd']">
          <template #default="scope">
            <el-link type="primary" title="下载" @click="downLoadFile(scope.row)">
              <el-icon>
                <SvgIcon name="fa fa-download"></SvgIcon>
              </el-icon>
            </el-link>
            <el-popconfirm title="确定删除吗？" @confirm="deleteFile(scope.row)">
              <template #reference>
                <el-link title="删除" type="danger" class="ml10" v-auth="'system-user-delete'">
                  <el-icon>
                    <ele-Delete/>
                  </el-icon>
                </el-link>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>

      <el-pagination
          class="mt15"
          style="justify-content: flex-end;"
          v-model:currentPage="queryVo.current"
          v-model:page-size="queryVo.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          small
          background
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="getList"
          @current-change="getList"
      />
    </el-row>

  </el-card>
</template>

<script setup>
import SvgIcon from '/@/components/svgIcon/index.vue';
const uploadUrl = import.meta.env.VITE_PUBLIC_PATH + '/sysOss/upload'
import {getUploadFileMaxSize,queryList,delFiles} from "/@/api/oss";
import {ElMessage} from "element-plus";
const {proxy}=getCurrentInstance()
const fileSize = ref()
const uploadRef = ref()
const total = ref(0)
const state =reactive({
  pageList:[],
  btnTitle:'文件上传',
  btnLoding:false,
  viewFlag:false,
  viewTitle:'预览:关',
  loding:true,
  uploadFileList:[],
})
const url =ref('')

const srcList =ref([])
const queryVo=reactive({
  current:1,
  pageSize:10,
  fileName:undefined,
  fileOnceName:undefined,
  fileFomat:undefined,
})
const selectNodes =ref([])
const {pageList} = toRefs(state)

const showView=()=>{
  state.viewFlag=!state.viewFlag
  if(state.viewFlag) state.viewTitle='预览:开'
  else state.viewTitle='预览:关'
}
const resetQuery=()=>{}
const selectDelete=()=>{
  const arr = []
  selectNodes.value.forEach(val =>{
    arr.push(val.fileId)
  })
  delFile(arr)
}
const deleteFile=(node)=>{
  const arr =[]
  arr[0]=node.fileId
  delFile(arr)
}
const downLoadFile=(node)=>{
  window.location.href =node.fileOssUrl
}
const handleSelectionChange=(node)=>{
  selectNodes.value=node
}
const delFile= async (arr)=>{
    state.loding=true
   await delFiles(arr).then(res =>{
    ElMessage.success(res.msg)
    getList()
     state.loding=false
  })
}
const showPicView=(str)=>{
  srcList.value=[]
  srcList.value.push(str)
}

//文件上传失败时的钩子
const onError = (error, uploadFile, uploadFiles) => {
  ElMessage.error("文件上传失败，请重试")
  state.uploadFileList =[]
  state.btnLoding=false
  state.btnTitle='文件上传'
}
//文件上传成功时的钩子
const onSuccess = async (response, uploadFile, uploadFiles) => {
  let {code} =response
  if(code ===200){
    ElMessage.success("文件上传成功")
    uploadRef.value.clearFiles()
    state.uploadFileList =[]
    state.btnLoding=false
    state.btnTitle='文件上传'
    getList()
  }
}
//文件上传时的钩子
const onProgress = (evt, uploadFile, uploadFiles) => {
  state.btnLoding=true
  state.btnTitle='上传中'
}

// 文件上传前的钩子
const handlerBefore = (file) => {
  if (checkSize(file)) {
    return true
  } else {
    ElMessage.error("上传文件大小不能超过:" + (fileSize.value / 1024 / 1024) + "MB")
    return false
  }
}
const getList =async ()=>{
  state.loding=true
  await queryList(queryVo).then(res=>{
    state.pageList = res.data.rows
    total.value=res.data.pageTotal
    state.loding=false
  })
}
const checkSize = (file) => {
  return file.size < fileSize.value
}
onBeforeMount(() => {
  getUploadFileMaxSize().then(res => {
    fileSize.value = res.data
  })
  getList()
})

</script>

<style scoped>

</style>